<template>
    <div>
        <el-card>
        <!--查询添加-->
        <el-row>
              <el-col :span="8">
                <el-input placeholder="请输入内容" clearable v-model="queryInfo.queryString" class="input-with-select" @clear="findPage">
                  <el-button slot="append" icon="el-icon-search" @click="findPage"/>
                </el-input>
              </el-col>
              <el-col :span="2">
                <el-button style="margin-left: 10px" @click="insert"  type="primary">添加信息</el-button>
              </el-col>
        </el-row>
          <!--列表-->
        <el-table :data="tableList" stripe  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"  row-key="id" >
              <el-table-column type="index" label="序号" />
              <el-table-column prop="title" label="标题" show-overflow-tooltip style="width:100px"/>
              <el-table-column prop="introduce" label="介绍" show-overflow-tooltip  style="width:100px"/>
              <el-table-column label="封面">
                    <template slot-scope="scope">
                        <el-image
                            style="height: 70px"
                            :src="scope.row.picCover"
                            :preview-src-list="preview(scope.row.picCover)">
                        </el-image>
                    </template>
              </el-table-column>
              <el-table-column label="视频课程">
                    <template slot-scope="scope">
                        <video
                            ref="videoPlay"
                            :src="scope.row.videoPath"
                            height="70px"
                            style="background-color: black"
                            controls="controls"
                        >
                            您的浏
                            览器不支持视频播放
                        </video>
                    </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间" />
              <el-table-column prop="createUid" label="创建人" />
          <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="primary" @click="update(scope.row) " size="small" icon="el-icon-edit" circle/>
              <el-button type="danger" @click="deleteById(scope.row.id)"   size="small"  icon="el-icon-delete" circle/>
            </template>
          </el-table-column>
        </el-table>
          <!--底部分页条-->
        <el-pagination
          @size-change="handlePageSize"
          @current-change="handlePageNumber"
          :current-page="currentPage4"
          :page-sizes="[4, 25, 50, 100]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"/>

          <el-dialog :title="title"  :visible.sync="open1" width="60%" center >
                <el-form ref="form" :model="form" label-position="top" :rules="rules">
                    <el-form-item prop="title" label="标题" >
                      <el-input v-model="form.title" placeholder="请输入课程名" style="width: 100%" maxlength="30"/>
                    </el-form-item>
                    <el-form-item  prop="introduce" label="内容"   >
                      <el-input v-model="form.introduce" placeholder="请输入课程介绍" style="width: 100%" maxlength="30"/>
                    </el-form-item>
                    <el-form-item label="课程封面" prop="picCover" style="float:left;">
                            <el-upload
                                class="avatar-uploader"
                                :action="action"
                                :headers="headers"
                                :show-file-list="false"
                                :on-success="handleSuccess"
                                :before-upload="beforeUpload">
                                <img v-if="form.picCover" :src="form.picCover" class="avatar"/>
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                      </el-form-item>
                      <el-form-item label="课程视频" prop="videoPath" style="margin-left: 100px;">
                            <el-upload
                                class="avatar-uploader"
                                :action="action"
                                :headers="headers"
                                :show-file-list="false"
                                :on-success="handleSuccess1"
                                :before-upload="beforeUpload">
                                <video v-if="form.videoPath" :src="form.videoPath" class="avatar" ></video>
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                      </el-form-item>
                    
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="open1 = false">取 消</el-button>
                    <el-button type="primary" @click="clickOk">确 定</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
import {marked} from "marked";
export default {
    data(){
        return {
            queryInfo: {
              //页码
              pageNumber: 1,
              //页数
              pageSize: 4,
              //关键字
              queryString: ""
            },
            action:'/tool/upload',
            headers:{
                Authorization: sessionStorage.getItem("token")
            },
            imageUrl: null,
            videoUrl: null,
            //表格数据
            tableList:[],
            //总记录数
            total: 0,
            currentPage4: 1,
            //弹窗标题
            title: null,
            //是否打开会话框
            open1: false,
            //表单数据
            form: {},
            rules:{
                title:[
                    { required: true, message: '标题不能为空', trigger: 'blur' },
                    { max:30,message:'标题最大不能超过30' ,trigger: 'blur'}
                ],
                introduce:[
                    { required: true, message: '内容不能为空', trigger: 'blur' },
                ]

            }
        }
    },

    methods:{
        handleSuccess(res,file){
            this.imageUrl = this.$qiniu + res.data;
            this.form.picCover = this.imageUrl;
            console.log(this.form);
        },
        handleSuccess1(res,file){
            this.videoUrl = this.$qiniu + res.data;
            this.form.videoPath = this.videoUrl;
        },
        /**
         *头像上传之前
         * 可以判断文件格式，文件大小
         * **/
        beforeUpload(file){
          let index = file.name.lastIndexOf('.');
          let suffix = file.name.substring(index +1);
          //判断文件大小，不能超过10M
          if (file.size > 10*1024*1024){
              this.$message.warning("文件大小不能超过10M")
              return false;
          }
        },
         /*头像预览*/
         preview(src){
            let arr = [];
            arr.push(src);
            return arr;
        },
        // uploadImage(pos,$e){
        //     let formdata = new FormData();
        //     formdata.append('file',$e);
        //     this.$ajax.post("/tool/upload",formdata).then(res=>{
        //         this.$refs.md.$img2Url(pos, this.$qiniu + res.data.data)
        //     })
        // },
        findPage(){
            this.$ajax.post("/course/findPage", this.queryInfo).then((res)=>{
                this.tableList = res.data.rows;
                this.total = res.data.total;
            });
        },

    //页面改变事件
    handlePageNumber(newPageNumber){
      //将分页的新数据的参数传递给后端查询
      this.queryInfo.pageNumber = newPageNumber;
      //调分页方法
      this.findPage();
    },

    handlePageSize(newPageSize){
      this.queryInfo.pageSize = newPageSize;
      this.findPage();
    },


    insert(){
      this.title = "添加视频课程";
      this.form = {};
      this.open1 = true;
    },
    update(row){
      console.log(row);
        this.title = "修改视频课程";
        if (row.path === '/'){
            this.isChildrenMenu = false;
        }else {
            //禁用菜单级别的选择
            this.disMenuSelect = true;
        }
          this.form = row;
          this.open1 = true;
    },
    //删除权限信息
    deleteById(id){
      this.$confirm('您将永久删除id是{' + id +' }的新闻资讯, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //调用后端删除权限接口
        this.$ajax.delete(`/course/delete/${id}`).then(res => {
          this.$message.success(res.data.message);
          this.queryInfo.pageNumber = 1;
          this.findPage();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //提交表单要添加的菜单数据给后端
    clickOk(){
      //进行表单校验
      this.$refs.form.validate((valid) =>{
        //校验不通过
        if(!valid) return this.$message.error('表单校验不通过，请检查后提交！')

        //校验通过 判断是否是新增
        if(this.form.id === undefined || this.form.id ===null){
          this.$ajax.post("/course/insert",this.form).then((res)=>{
            this.$message.success(res.data.message)
            this.open1 = false;
            this.findPage();
          })
        }else {
          this.$ajax.put('/course/update',this.form).then((res)=>{
            this.$message.success(res.data.message)
            this.open1 = false;
            this.findPage();
          })
        }
      })
    },

    },

    created(){
        this.findPage();
    }
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 130px;
    height: 130px;
    line-height: 130px;
    text-align: center;
}
.avatar {
    width: 130px;
    height: 130px;
    display: block;
}
</style>